<template>
	<view style="padding-bottom:50rpx;">
		<page-head :title="'投诉'" :headtype="2"></page-head>
		<view class="plain marginAuto">
			<view class="plain-txt">
				<textarea class="plain-txtar" v-model="plaintxt" maxlength="999" placeholder="请输入对教练的投诉问题~"></textarea>
			</view>
			<view class="upphoto flex">
 				<view class="upphotoeach flex" v-for="(item,index) in plaindata" :key="index">
					<uv-icon @click="delphoto(item,index)" class="close" name="close-circle-fill" size="26" color="#cccccc"></uv-icon>
					<image :src="apifun.URLimg+item" mode=""></image>
				</view>
				<view class="upphotoeach flex" style="border: 1px dashed #BCBCBC;" @click="uploadplain()">
					<view  class="upphotoicon marginAuto" style="width:100%;">
						<uv-icon style="position: relative;left:50%;margin-left:-40rpx;" name="photo" size="36" color="#9E9E9E"></uv-icon>
						<view style="line-height:60rpx;font-size:34rpx;color:#9E9E9E;text-align: center;">添加照片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:100rpx;">
			<uv-button text="提交" @click="enter()" :customStyle="{
				'background':'#1686F8',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				id:'',
				plaintxt:'',
				plaindata:[]
			};
		},
		onLoad(option) {
			this.id = option.id
		},
		methods: {
			enter(){
				let sendData = {
					order_id:this.id,
					img:this.plaindata,
					content:this.plaintxt
				};
				if(this.plaintxt == ''){
					this.apifun.toast('请输入您要投诉的信息');
					return false
				};
				this.apifun.unirequest('/api/verifyCart/complaintOrder','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast('投诉成功');
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/tabbar/my'
							})
						},1500)
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			delphoto(item,index){
				this.plaindata.splice(index,1)
			},
			uploadplain(){
				this.apifun.uploadFileimg((res)=>{
					if(res.code == 200){
						this.plaindata.push(res.data.src)
					}else{
						this.apifun.toast(res.msg)
					}
				},this)
			}
		},
	};
</script>

<style scoped lang="scss">
	.plain{
		width: 630rpx;
		padding: 20rpx;
		margin: auto;
		background:#ffffff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.plain-txt{
			width: 100%;
			height: 450rpx;
			.plain-txtar{
				width: 100%;
				height: 450rpx;
				font-size:30rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}
		.upphoto{
			justify-content: space-between;
			flex-wrap: wrap;
			.upphotoeach{
				position: relative;
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.close{
					position: absolute;
					z-index: 10;
					right:-10rpx;
					top:-10rpx;
				}
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>